<template>
  <div>
    <h2>循环渲染指令</h2>
    <ul>
      <li v-for="(item,index) in list" :key="item.id">
        <input type="checkbox" />
        {{index}} -- {{item.id}} -- {{item.name}} -- {{item.nickname}}
        <button @click="del(item.id)">删除</button>

      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 2, name: '宋江', nickname: '及时雨' },
        { id: 3, name: '吴用', nickname: '智多星' },
        { id: 5, name: '林冲', nickname: '豹子头' },
        { id: 7, name: '花荣', nickname: '小李广' }
      ]
    }
  },
  methods: {
    del(id){
      // console.log('删除的id号:',id)
      this.list = this.list.filter(item=>item.id != id)
    }
  }
};
</script>
